<template>
    <div id="polling-project" class="w-h-100">
        <div class="w-h-100 pos-r flex-1 apply-container" style="box-sizing: border-box;overflow:hidden;">
            <el-row class="w-h-100">
                <el-col :xs="24" :sm="24" :md="24" :lg="24" :xl="24" class="w-h-100">
                    <div class="w-h-100 ver-flex" style="box-sizing: border-box;overflow: hidden;">
                        <!-- 新增风险管控清单 -->
                        <div style="box-sizing: border-box;">
                            <el-card shadow="never" :body-style="{ paddingBottom: '0', paddingTop: '0' }">
                                <el-table 
                                    ref="multipleTableRef"
                                    :data="issueList" 
                                    class="w-h-100" 
                                    style="width: 100%" border v-loading="issueLoading" 
                                    element-loading-background="rgba(0, 0, 0, 0.5)"
                                    @selection-change="handleSelectionChange"
                                >
                                    <el-table-column type="selection" width="55" fixed="left" />
                                    <el-table-column min-width="160" :show-overflow-tooltip="true" label="风险管控分析单元"  align="center" >
                                        <template #default="scope">
                                            <span v-if="scope.row.v_AnalysisUnitName">{{scope.row.v_AnalysisUnitName}}</span>
                                            <span v-else>-</span>
                                        </template>
                                    </el-table-column>
                                    <el-table-column min-width="160" :show-overflow-tooltip="true" label="风险事件"  align="center" >
                                        <template #default="scope">
                                            <span v-if="scope.row.v_EventName">{{scope.row.v_EventName}}</span>
                                            <span v-else>-</span>
                                        </template>
                                    </el-table-column>
                                    <el-table-column min-width="160" :show-overflow-tooltip="true" label="辨析范围分类"  align="center" >
                                        <template #default="scope">
                                            <span v-if="scope.row.v_Discriminate">{{scope.row.v_Discriminate}}</span>
                                            <span v-else>-</span>
                                        </template>
                                    </el-table-column>
                                    <el-table-column min-width="160" :show-overflow-tooltip="true" label="危害因素"  align="center" >
                                        <template #default="scope">
                                            <span v-if="scope.row.v_HazardousFactors">{{scope.row.v_HazardousFactors}}</span>
                                            <span v-else>-</span>
                                        </template>
                                    </el-table-column>
                                    <el-table-column min-width="160" :show-overflow-tooltip="true" label="管控措施分类"  align="center" >
                                        <template #default="scope">
                                            <span v-if="scope.row.v_DCMeasureClassName">{{scope.row.v_DCMeasureClassName}}</span>
                                            <span v-else>-</span>
                                        </template>
                                    </el-table-column>
                                    <el-table-column min-width="160" :show-overflow-tooltip="true" label="管控措施"  align="center" >
                                        <template #default="scope">
                                            <span v-if="scope.row.v_DCMeasure">{{scope.row.v_DCMeasure}}</span>
                                            <span v-else>-</span>
                                        </template>
                                    </el-table-column>
                                    <el-table-column min-width="160" :show-overflow-tooltip="true" label="隐患排查内容"  align="center" >
                                        <template #default="scope">
                                            <span v-if="scope.row.v_CheckContent">{{scope.row.v_CheckContent}}</span>
                                            <span v-else>-</span>
                                        </template>
                                    </el-table-column>
                                </el-table>
                            </el-card>
                        </div>
                    </div>
                </el-col>
            </el-row>
        </div>
    </div>
</template>
<script lang="ts">
import { defineComponent, ref , watch , onMounted , nextTick } from 'vue';
import { ElCol, ElRow } from 'element-plus';
import { SMSIPTaskContentForChoose , SMSIPTaskContentBatchAddOrUpdate } from '/@/api/centerControl/sms';
export default defineComponent( {
    name: 'polling-project',
    components: {},
    props: {
        pollingInfo: {
            type: String,
            default: ''
        }
    },
    setup(props,ctx){
        const issueList = ref();
        const issueLoading = ref(false);
        let multipleSelection = ref([]);
        const multipleTableRef:any = ref(null);

        const handleSelectionChange = (val: any) => {
            multipleSelection.value = val;
        }
        /*** 提交选择的数据 */
        const submitFun = async(val: any) => {
            console.log(val,'val')
            let param:any = {};
            let setArr: any = [];
            val.map((item: any) => {
                setArr.push(item.id);
            });
            param.l_SMSDCListIds = setArr;
            param.l_IPTaskId = JSON.parse(props.pollingInfo).taskId;
            try{
                let res: any = await SMSIPTaskContentBatchAddOrUpdate(param);
                if(res.success){
                    multipleSelection.value = [];
                    return true;
                }
            }catch(error){
                return false;
            }
        }
        /*** getItemList 获取巡检项目列表 */
        const getItemList = async() => {
            let res: any = await SMSIPTaskContentForChoose({l_IPTaskId: JSON.parse(props.pollingInfo).taskId});
            if(res.success && res.data.length !== 0){
                issueList.value = res.data;
                if(issueList.value.length !== 0){
                    setTimeout(() => {
                        let getIdArr  = res.data.filter((obj: any) => obj.isChoose);
                        if(getIdArr.length !== 0) multipleSelection.value = getIdArr;
                        res.data.map((item: any) => {
                            multipleTableRef.value!.toggleRowSelection(item, item.isChoose);
                        });
                    });
                }
            }
            issueLoading.value = false;
        }
        watch(() => multipleSelection.value,(newVal) => {
            if(newVal) ctx.emit('pollingSub',newVal,submitFun);
        })
        onMounted(() => {
            nextTick(() => {
                multipleSelection.value = [];
                issueLoading.value = true;
                getItemList();
            })
        })
        return {
            issueList,
            issueLoading,
            handleSelectionChange,
            multipleSelection,
            multipleTableRef,
        }
    },
})
</script>
<style scoped lang="scss">
#polling-project{
    height: calc(100vh - 188px);
    width: 100%;
    padding: 20px 0px;
}
.active{
    background: rgba(0,0,0,.2)!important;
}
.area-l:hover{
    background: rgba(0,0,0,.2)!important;
}
ul {
    list-style: none;
    // padding: 10px 0;
    li {
        cursor: pointer;
        border-bottom: 1px solid rgba(255,255,255,0.1);
        // text-align: center;
        padding: 20px 0 20px 10px;
    }
}
</style>
